<template>
  <el-pagination
  background
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    layout="  prev, pager,next"
    :total="total"
  >
  </el-pagination>
</template>
  
  <script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 100,
    },
    pageSizes: {
      type: Array,
      default: () => [100, 200, 300, 400],
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    handleSizeChange(size) {
      this.$emit("size-change", size);
    },
    handleCurrentChange(page) {
      this.$emit("current-change", page);
    },
  },
};
</script>
  <style >
.el-pagination .el-select .el-input .el-input__inner {
  background: rgba(31, 50, 83, 0.1) !important;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background: rgba(31, 50, 83, 0.1) !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #265ec0 !important;
}
</style>
  